<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>phonemap</title>

<link href="http://www.gstatic.com/codesite/ph/17444577587916266307/css/ph_core.css" rel="stylesheet" type="text/css" />
 <link href="http://code.google.com/css/codesite.pack.04102009.css" rel="stylesheet" type="text/css" />
  <script language="javascript" src='script/common/jquery-1.11.0.min.js'></script>
  <script language="javascript" src='script/admin/ajax.util.js'></script>
</head>

<body>
    
   
  <!-- content -->  
  <div  id="gc-pagecontent" ></div>
  <h1 class="page_title">phonemap</h1>
  
 <!-- tabs --> 
 <div id="tabs" class="gtb">
      <a id="home" href="#home" class="tab">Home</a>
	  <a id="user" href="#user" class="tab">User</a> 
	  <a id="position" href="#position" class="tab">Position</a>
<!-- 	  <a id="photo" href="#photo" class="tab">Photo</a> -->
<!-- 	  <a id="viewType" href="#viewType" class="tab">View Type</a> -->
<!-- 	  <a id="relationship" href="#relationship" class="tab">Relationship</a> -->
	  <a id="follow" href="#follow" class="tab">Follow</a>
	  <div class="gtbc"></div>
  </div>
  <!-- home page content -->
  <div class="g-unit" id="home-tab">
  	<h2>Create Flow Chart</h2>
    <p>
      <div align="left">
        <img src="images/codeLab2Create.png" />
      </div>
      
        <ol>
          <li>Product/Item servlet will be invoked on <b>Save</b>
            click from UI</li>
          <li>doPut() method of respective servlet will
            invoke <b>datastore API</b> to persist the data
            into datastore</li>
          <li>Also, the same data copy is pushed into
            memcache store.</li>
        </ol>
      </p>
      
    <h2>List Flow Chart</h2>
     <p>
      <div align="left">
        <img src="images/codeLab2List.png" />
      </div>
     
        <ol>
          <li>On UI tab selection, doGet() of the
            respective servlet gets called</li>
          <li>Call to memcache store (using memcache API)
            is made to check whether the entity requested is
            available in memcache store.</li>
          <li>If the data is not present in cache store
            then, call will be forwarded to datastore.</li>
          <li>JSON objects are returned to the UI and
            custom JSON converter will parse the JSON
            objects</li>
        </ol>
      </p>
  </div>
  <!-- ******************************************* user ******************************************* -->
  <div class="g-unit" id="user-tab">
  <div class ="message" id="user-show-message" style="display:none">
  </div>
  <!-- search container -->
   	<div class="gsc-search-box" id="user-search-ctr">
   	<!-- section title -->
   	<h2>All Users</h2>
   	<form name="user-search-form" id="user-search-form">
   	<label>Name</label>
   	 		<input type="text" name="q" id="q" class="gsc-input"/> 
	   	    <input type="button" value="Search" onclick="search('user')" class="gsc-search-button" />
            <input type="button" value="Add" onclick="add('user')" class="gsc-search-button" />
            <input type="reset" id="user-search-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
    </form>
   	</div>
   <!-- list container -->
   	<div class="results" style="border:0;" id="user-list-ctr">
          <table width="100%" cellspacing="0" cellpadding="2" border="0" style="border-collapse:collapse;">
            <thead>
              <tr>
              	<th scope="col">No.</th>
                <th scope="col">Id</th>
                <th scope="col">Fullname</th>
                <th scope="col">Link</th>
                <th scope="col">Birthday</th>
                <th scope="col">Interested In</th>
                <th scope="col">Avatar</th>
                <th scope="col">Gender</th>
                <th scope="col">Relationship</th>
                <th scope="col">Timezone</th>
                <th scope="col">Locale</th>
                <th scope="col">Verified</th>
                <th scope="col">Email</th>
                <th scope="col">Located</th>
                <th scope="col">Located Time</th>
                <th scope="col">Username</th>
                <th scope="col">Action</th>
              </tr>
            </thead>
            <tbody id="user-list-tbody"></tbody>
          </table>
  	</div>
  	<div class="create-ctr" id="user-create-ctr">
	  	<h2>Create User</h2>
	  	<form name="user-create-form" id="user-create-form">
  			<table width="200" cellspacing="0" cellpadding="0">
	  		   <tbody>
	  		   	
	              <tr>
	                 <td>FId</td>
	                 <td><span class="readonly"><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="fid" id="fid" /></span></td>
	               </tr>
					<tr>
	                  <td>fullname</td>
	                  <td><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="fullname" id="fullname" /></td>
	                </tr>
	                <tr>
	                  <td>Lat</td>
	                  <td><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="lat" id="lat" /></td>
	                </tr>
	                <tr>
	                  <td>Lng</td>
	                  <td><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="lng" id="lng" /></td>
	                </tr>
		            <tr>
          			  <td>&nbsp;</td>
          			  <td> 
          				<input type="button" class="save" title="Save" value="Save" onclick="formValidate('user')" />
          				<input type="button" class="cancel" title="Cancel" value="Cancel" onclick="cancel('user')" />
          				<input type="reset" id="user-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
         			  </td>
        			</tr>
	  			  </tbody>
		        </table>
		    </form>
		</div>
  	
  </div>
  
  
   <!-- ******************************************* position ******************************************* -->
  <div class="message" id="position-show-message" style="display:none">
  </div>
  <div class="g-unit" id="position-tab">
	   <!-- search container -->
	   	<div class="gsc-search-box" id="position-search-ctr">
	   	<!-- section title -->
	   	<h2>All Positions</h2>
	   	<form name="position-search-form" id="position-search-form">
	   	   <input type="text" name="q" id="q" class="gsc-input"/> 
	   	   <select id="by" name="position-searchby" class="gsc-input">
              <option value="name">Position</option>
              <option value="user">User</option>
            </select> 
            <input type="button" value="Search" onclick="search('position')" class="gsc-search-button" />
            <input type="button" value="Add" onclick="add('position')" class="gsc-search-button" />
            <input type="reset" id="position-search-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
          </form>  
	   	</div>
	   <!-- list container -->
	   	<div class="results" style="border:0;" id="position-list-ctr">
           <table width="100%" cellspacing="0" cellpadding="2" border="0" style="border-collapse:collapse;">
             <thead>
				<tr>
					<th scope="col">No</th>
					<th scope="col">PositionId</th>
					<th scope="col">FId</th>
					<th scope="col">Located</th>
					<th scope="col">Located Time</th>
					<th scope="col">Action</th>
				</tr>
				</thead>
             <tbody id="position-list-tbody"></tbody>
           </table>
	  	</div>
	  	<!-- create container -->
	  	<div class="create-ctr" id="position-create-ctr">
	  	<h2>Create Position</h2>
	  	<form name="position-create-form" id="position-create-form">
	  	<table width="200" cellspacing="0" cellpadding="0">
           <tr> 
           	 <td>Latitude</td>
             <td ><span class="readonly"><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="latitude" id="latitude" /></span></td>
           </tr>
           <tr>
             <td>Longitude</td>
             <td><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="longitude" id="longitude" /></td>
           </tr>
           <tr>
             <td>User</td>
             <td><select id="position-user-list" name="user"></select></td>
           </tr>
            <tr>
              <td>&nbsp;</td>
              <td> 
                  <input type="button" class="save" title="Save" value="Save" onclick="formValidate('position')" />
                  <input type="button" class="cancel" title="Cancel" value="Cancel" onclick="cancel('position')" />
                  <input type="reset" id="position-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
              </td>
            </tr>
			 </table>
			 </form>
	  	</div>
	  	<!-- create conatiner ends here -->
  </div>
   
   <!-- ******************************************* photo ******************************************* -->
  <div class="message" id="photo-show-message" style="display:none">
  </div>
  <div class="g-unit" id="photo-tab">
  	<!-- search container -->
	   	<div class="gsc-search-box" id="photo-search-ctr">
<!-- 	   	section title -->
	   	<h2>All Photos</h2>
	   	<form name="photo-search-form" id="photo-search-form">
	   	   <input type="text" name="q" id="q" class="gsc-input"/> 
	   	   <select id="by" name="photo-searchby" class="gsc-input">
              <option value="name">Photo</option>
              <option value="user">User</option>
            </select> 
            <input type="button" value="Search" onclick="search('photo')" class="gsc-search-button" />
            <input type="button" value="Add" onclick="add('photo')" class="gsc-search-button" />
            <input type="reset" id="photo-search-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
          </form>  
	   	</div>
<!-- 	   list container -->
	   	<div class="results" style="border:0;" id="photo-list-ctr">
           <table width="100%" cellspacing="0" cellpadding="2" border="0" style="border-collapse:collapse;">
             <thead>
               <tr>
               	 <th scope="col">User</th>
                 <th scope="col">Title</th>
                 <th scope="col">Caption</th>
                 <th scope="col">Content Type</th>
                 <th scope="col">File</th>
                 <th scope="col">Action</th>                      
               </tr>
             </thead>
             <tbody id="photo-list-tbody"></tbody>
           </table>
	  	</div>
<!-- 	  	create container -->
	  	<div class="create-ctr" id="photo-create-ctr">
	  	<h2>Create Photo</h2>
	  	<form name="photo-create-form" id="photo-create-form" enctype="multipart/form-data">
           
	  	<table width="200" cellspacing="0" cellpadding="0">
           <tr> 
           	 <td>Title</td>
             <td ><span class="readonly"><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="title"/></span></td>
           </tr>
           <tr>
             <td>Caption</td>
             <td><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="caption" id="caption" /></td>
           </tr>
           <tr>
             <td>Upload</td>
             <td><input type="file" name="fileupload" id="fileupload" /></td>
           </tr>
           <tr>
             <td>User</td>
             <td><select id="photo-user-list" name="user"></select></td>
           </tr>
            <tr>
              <td>&nbsp;</td>
              <td> 
                  <input type="button" class="save" title="Save" value="Save" onclick="uploadImage('photo')" />
                  <input type="button" class="cancel" title="Cancel" value="Cancel" onclick="cancel('photo')" />
                  <input type="reset" id="photo-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
              </td>
            </tr>
			 </table>
			 </form>
	  	</div>

  </div>
  <!-- 	  	create conatiner ends here -->
		<!-- ******************************************* viewType ******************************************* -->
		  <div class="g-unit" id="viewType-tab">
		  <div class ="message" id="viewType-show-message" style="display:none">
		  </div>
		  <!-- search container -->
		   	<div class="gsc-search-box" id="viewType-search-ctr">
		   	<!-- section title -->
		   	<h2>All Users</h2>
		   	<form name="viewType-search-form" id="viewType-search-form">
		   	<label>Name</label>
		   	 		<input type="text" name="q" id="q" class="gsc-input"/> 
			   	    <input type="button" value="Search" onclick="search('viewType')" class="gsc-search-button" />
		            <input type="button" value="Add" onclick="add('viewType')" class="gsc-search-button" />
		            <input type="reset" id="viewType-search-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
		    </form>
		   	</div>
		   <!-- list container -->
		   	<div class="results" style="border:0;" id="viewType-list-ctr">
		          <table width="100%" cellspacing="0" cellpadding="2" border="0" style="border-collapse:collapse;">
		            <thead>
		              <tr>
		                <th scope="col">Name</th>
		                <th scope="col">Action</th>
		              </tr>
		            </thead>
		            <tbody id="viewType-list-tbody"></tbody>
		          </table>
		  	</div>
		  	<div class="create-ctr" id="viewType-create-ctr">
			  	<h2>Create View Type</h2>
			  	<form name="viewType-create-form" id="viewType-create-form">
		  			<table width="200" cellspacing="0" cellpadding="0">
			  		   <tbody>
			              <tr>
			                 <td>Name</td>
			                 <td><span class="readonly"><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="viewTypeName" id="viewTypeName" /></span></td>
			               </tr>
							
				            <tr>
		          			  <td>&nbsp;</td>
		          			  <td> 
		          				<input type="button" class="save" title="Save" value="Save" onclick="formValidate('viewType')" />
		          				<input type="button" class="cancel" title="Cancel" value="Cancel" onclick="cancel('viewType')" />
		          				<input type="reset" id="viewType-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
		         			  </td>
		        			</tr>
			  			  </tbody>
				        </table>
				    </form>
				</div>
		  	
		  </div>
		  
		  <!-- ******************************************* relationship ******************************************* -->
		  <div class="g-unit" id="relationship-tab">
		  <div class ="message" id="relationship-show-message" style="display:none">
		  </div>
		  <!-- search container -->
		   	<div class="gsc-search-box" id="relationship-search-ctr">
		   	<!-- section title -->
		   	<h2>All Relationships</h2>
		   	<form name="relationship-search-form" id="relationship-search-form">
		   	<label>Name</label>
		   	 		<input type="text" name="q" id="q" class="gsc-input"/> 
			   	    <input type="button" value="Search" onclick="search('relationship')" class="gsc-search-button" />
		            <input type="button" value="Add" onclick="add('relationship')" class="gsc-search-button" />
		            <input type="reset" id="relationship-search-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
		    </form>
		   	</div>
		   <!-- list container -->
		   	<div class="results" style="border:0;" id="relationship-list-ctr">
		          <table width="100%" cellspacing="0" cellpadding="2" border="0" style="border-collapse:collapse;">
		            <thead>
		              <tr>
		                <th scope="col">Name</th>
		                <th scope="col">Action</th>
		              </tr>
		            </thead>
		            <tbody id="relationship-list-tbody"></tbody>
		          </table>
		  	</div>
		  	<div class="create-ctr" id="relationship-create-ctr">
			  	<h2>Create Relationship Name</h2>
			  	<form name="relationship-create-form" id="relationship-create-form">
		  			<table width="200" cellspacing="0" cellpadding="0">
			  		   <tbody>
			              <tr>
			                 <td>Name</td>
			                 <td><span class="readonly"><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="relationshipName" id="relationshipName" /></span></td>
			               </tr>
							
				            <tr>
		          			  <td>&nbsp;</td>
		          			  <td> 
		          				<input type="button" class="save" title="Save" value="Save" onclick="formValidate('relationship')" />
		          				<input type="button" class="cancel" title="Cancel" value="Cancel" onclick="cancel('relationship')" />
		          				<input type="reset" id="relationship-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
		         			  </td>
		        			</tr>
			  			  </tbody>
				        </table>
				    </form>
				</div>
		  	
		  </div>
		  
		  <!-- ******************************************* follow ******************************************* -->
		  <div class="g-unit" id="follow-tab">
		  <div class ="message" id="follow-show-message" style="display:none">
		  </div>
		  <!-- search container -->
		   	<div class="gsc-search-box" id="follow-search-ctr">
		   	<!-- section title -->
		   	<h2>All Follows</h2>
		   	<form name="follow-search-form" id="follow-search-form">
		   	<label>Name</label>
		   	 		<input type="text" name="q" id="q" class="gsc-input"/> 
			   	    <input type="button" value="Search" onclick="search('follow')" class="gsc-search-button" />
		            <input type="button" value="Add" onclick="add('follow')" class="gsc-search-button" />
		            <input type="reset" id="follow-search-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
		    </form>
		   	</div>
		   <!-- list container -->
		   	<div class="results" style="border:0;" id="follow-list-ctr">
		          <table width="100%" cellspacing="0" cellpadding="2" border="0" style="border-collapse:collapse;">
		            <thead>
		              <tr>
		                <th scope="col">UserId</th>
		                <th scope="col">FollowId</th>
		                <th scope="col">Followed Time</th>
		                <th scope="col">Status</th>
		                <th scope="col">Action</th>
		              </tr>
		            </thead>
		            <tbody id="follow-list-tbody"></tbody>
		          </table>
		  	</div>
		  	<div class="create-ctr" id="follow-create-ctr">
			  	<h2>Create Follow Name</h2>
			  	<form name="follow-create-form" id="follow-create-form">
		  			<table width="200" cellspacing="0" cellpadding="0">
			  		   <tbody>
			              <tr>
			                 <td>UserId</td>
			                 <td><span class="readonly"><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="userId" id="userId" /></span></td>
			               </tr>
			               <tr>
			                 <td>FollowId</td>
			                 <td><span class="readonly"><input type="text" style="width: 185px;" autocomplete="off" class="gsc-input" maxlength="2048" name="followId" id="followId" /></span></td>
			               </tr>
							
				            <tr>
		          			  <td>&nbsp;</td>
		          			  <td> 
		          				<input type="button" class="save" title="Save" value="Save" onclick="formValidate('follow')" />
		          				<input type="button" class="cancel" title="Cancel" value="Cancel" onclick="cancel('follow')" />
		          				<input type="reset" id="follow-reset" class="cancel" title="Reset" value="Reset" style="visibility: hidden"/>
		         			  </td>
		        			</tr>
			  			  </tbody>
				        </table>
				    </form>
				</div>
		  	
		  </div>
  
<script type="text/javascript">

 $(window).load(function () {
   init();
});
 
</script>
</body>
</html>
